<template>
  <el-dialog
    v-model="visible"
    title="🎵 TTS语音设置"
    width="420px"
    :before-close="handleClose"
    @closed="handleClosed"
  >
    <div class="tts-settings-content">
      <!-- 语音模型选择 -->
      <div class="setting-group">
        <h4>🎭 语音模型</h4>
        <el-radio-group 
          v-model="localSettings.model" 
          @change="updateModel"
          class="model-radio-group"
        >
          <el-radio 
            v-for="model in ttsModels" 
            :key="model.model" 
            :value="model.model"
            class="model-radio"
          >
            <div class="model-info">
              <div class="model-main">
                <span class="model-name">{{ model.name }}</span>
                <span class="model-desc">{{ model.description }}</span>
              </div>
            </div>
          </el-radio>
        </el-radio-group>
      </div>

      <!-- 音量调整 -->
      <div class="setting-group">
        <h4>🔊 音量: {{ localSettings.volume }}%</h4>
        <el-slider
          v-model="localSettings.volume"
          :min="0"
          :max="100"
          :step="5"
          @input="updateVolume"
          show-stops
        />
      </div>

      <!-- 语速调整 -->
      <div class="setting-group">
        <h4>⚡ 语速: {{ localSettings.speechRate }}x</h4>
        <el-slider
          v-model="localSettings.speechRate"
          :min="0.5"
          :max="2.0"
          :step="0.1"
          @input="updateSpeechRate"
          show-stops
        />
      </div>

      <!-- 语调调整 -->
      <div class="setting-group">
        <h4>🎵 语调: {{ localSettings.pitchRate }}x</h4>
        <el-slider
          v-model="localSettings.pitchRate"
          :min="0.5"
          :max="2.0"
          :step="0.1"
          @input="updatePitchRate"
          show-stops
        />
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="resetSettings">
          <el-icon><RefreshLeft /></el-icon>
          重置
        </el-button>
        <el-button type="primary" @click="handleClose">
          <el-icon><Check /></el-icon>
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { RefreshLeft, Check } from '@element-plus/icons-vue'

// 类型定义
interface TTSSettings {
  model: string
  volume: number
  speechRate: number
  pitchRate: number
}

// Props
interface Props {
  modelValue: boolean
  settings: TTSSettings
  storageKey?: string
}

const props = withDefaults(defineProps<Props>(), {
  storageKey: 'tts-settings'
})

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'update:settings': [settings: TTSSettings]
  'settings-changed': [settings: TTSSettings]
}>()

// 响应式数据
const visible = ref(false)
const localSettings = reactive<TTSSettings>({
  model: 'sambert-zhijia-v1',
  volume: 50,
  speechRate: 1.0,
  pitchRate: 1.0
})

// TTS模型列表
const ttsModels = ref([
  {
    model: 'sambert-zhichu-v1',
    name: '知厨',
    language: 'zh-CN',
    description: '舌尖男声'
  },
  {
    model: 'sambert-zhijia-v1',
    name: '知佳',
    language: 'zh-CN',
    description: '标准女声'
  },
  {
    model: 'sambert-zhiyue-v1',
    name: '知悦',
    language: 'zh-CN',
    description: '温柔女声'
  },
  {
    model: 'sambert-eva-v1',
    name: 'Eva',
    language: 'zh-CN',
    description: '陪伴女声'
  }
])

// 监听modelValue变化
watch(() => props.modelValue, (newVal) => {
  visible.value = newVal
  if (newVal) {
    // 打开时同步设置
    Object.assign(localSettings, props.settings)
  }
})

// 监听visible变化
watch(visible, (newVal) => {
  emit('update:modelValue', newVal)
})

// 方法
const handleClose = () => {
  visible.value = false
}

const handleClosed = () => {
  // 弹窗关闭时保存设置
  saveSettings()
  emit('update:settings', { ...localSettings })
  emit('settings-changed', { ...localSettings })
}

const updateModel = (model: string) => {
  const selectedModel = ttsModels.value.find(m => m.model === model)
  if (selectedModel) {
    localSettings.model = model
    ElMessage.success(`✅ 已切换到 ${selectedModel.name} (${selectedModel.description})`)
  }
}

const updateVolume = (volume: number) => {
  localSettings.volume = volume
}

const updateSpeechRate = (rate: number) => {
  localSettings.speechRate = rate
}

const updatePitchRate = (pitch: number) => {
  localSettings.pitchRate = pitch
}

const resetSettings = () => {
  Object.assign(localSettings, {
    model: 'sambert-zhijia-v1',
    volume: 50,
    speechRate: 1.0,
    pitchRate: 1.0
  })
  ElMessage.success('✅ TTS设置已重置')
}

const saveSettings = () => {
  try {
    localStorage.setItem(props.storageKey, JSON.stringify(localSettings))
  } catch (error) {
    console.warn('保存TTS设置失败:', error)
  }
}

// 暴露方法给父组件
defineExpose({
  resetSettings,
  saveSettings
})
</script>

<style scoped>
.tts-settings-content {
  padding: 0;
}

.setting-group {
  margin-bottom: 24px;
}

.setting-group:last-child {
  margin-bottom: 0;
}

.setting-group h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.model-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.model-radio {
  width: 100%;
  margin-right: 0 !important;
  margin-bottom: 0;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.model-radio:hover {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.model-radio.is-checked {
  border-color: #409eff;
  background-color: #e6f7ff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.model-info {
  margin-left: 8px;
}

.model-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.model-name {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  min-width: 40px;
}

.model-desc {
  font-size: 13px;
  color: #666;
  opacity: 0.8;
  background: rgba(64, 158, 255, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0;
}

.dialog-footer .el-button {
  flex: 1;
  font-weight: 500;
  border-radius: 8px;
}

/* 滑块样式优化 */
.setting-group .el-slider {
  margin: 12px 0;
}

.setting-group .el-slider__runway {
  background-color: #f5f7fa;
  border-radius: 4px;
}

.setting-group .el-slider__bar {
  background: linear-gradient(90deg, #409eff, #36a3f7);
  border-radius: 4px;
}

.setting-group .el-slider__button {
  border: 2px solid #409eff;
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.setting-group .el-slider__button:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.setting-group .el-slider__stop {
  background-color: #dcdfe6;
  border-radius: 50%;
}

/* 对话框样式优化 */
:deep(.el-dialog) {
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

:deep(.el-dialog__header) {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-dialog__title) {
  font-size: 16px;
  font-weight: 600;
}

:deep(.el-dialog__body) {
  padding: 20px 24px;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px 20px;
  border-top: 1px solid #f0f0f0;
}
</style> 